<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">专家管理</span>
    <el-card class="box-card">
      <el-form ref="form" :model="form" class="ktname" label-width="80px">
            <el-col :span="4">
                <el-form-item label="课题类别">
                  <el-select v-model="form.region" placeholder="请选择">
                        <el-option label="选项一" value="shanghai"></el-option>
                        <el-option label="选项二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="curriculum" label="学科分类">
                    <el-select v-model="form.region2" placeholder="请选择">
                        <el-option label="选项一" value="shanghai"></el-option>
                        <el-option label="选项二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="curriculum" label="所属系统">
                    <el-select v-model="form.region3" placeholder="请选择">
                        <el-option label="选项一" value="shanghai"></el-option>
                        <el-option label="选项二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item class="curriculum" label="评分方式">
                    <el-select v-model="form.region4" placeholder="请选择">
                        <el-option label="选项一" value="shanghai"></el-option>
                        <el-option label="选项二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" style="margin-left: 30px;">筛选</el-button>
              <el-button>清空</el-button>
            </el-col>
          </el-form>
          <!--  -->
          <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                    >
             <el-table-column type="selection" width="60"></el-table-column>
             <el-table-column prop="data" label="小组名称" width="160"></el-table-column>
             <el-table-column prop="data2" width="230" label="课题类别"></el-table-column>
             <el-table-column prop="data3" width="180" label="学科分类"></el-table-column>
             <el-table-column prop="data4" width="180" label="所属系统" ></el-table-column>
             <el-table-column prop="data5" width="180" label="课题数量"></el-table-column>
             <el-table-column prop="data6" width="180" label="评审方式"></el-table-column>
             <el-table-column prop="data7" label="评分状态"></el-table-column>
             <el-table-column label="操作">
              <el-link type="primary" @click="dialogVisible = true">分配专家</el-link>
             </el-table-column>
        </el-table>
    </el-card>
    <!-- 分配专家 -->
    <el-dialog
      title="分配专家"
      :visible.sync="dialogVisible"
      width="40%">
      <el-table
        :data="fpdata"
        tooltip-effect="dark"
        style="width: 100%"
          >
             <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="name" label="专家编号" ></el-table-column>
             <el-table-column prop="name2"  label="账号"></el-table-column>
             <el-table-column prop="name3"  label="密码"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
          dialogVisible:false,
          fpdata:[{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          },{
            name:'001',
            name2:'专家1',
            name3:'123456',
          }],
          form:{
            region:'',
            region2:'',
            region3:'',
            region4:'',
          },
          tableData:[{
            data:'综合_一级',
            data2:'《古猿人进化史》',
            data3:'综合问题研究',
            data4:'本科院校',
            data5:'1',
            data6:'/',
            data7:'未开始评分',
          }]
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{}
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
</style>